<template>
    <div class="basic-info-container">
        <!-- 左侧菜单 -->
        <div class="left-menu">
            <div class="menu-item" :class="{ active: activeTab === 'department-management' }"
                @click="switchTab('department-management')">
                <i class="fas fa-building"></i> <!-- 部门图标 -->
                <span>部门管理</span>
            </div>

            <div class="menu-item" :class="{ active: activeTab === 'employee-management' }"
                @click="switchTab('employee-management')">
                <i class="fas fa-users"></i> <!-- 设置图标 -->
                <span>员工管理</span>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="right-content">
            <!-- 功能栏 -->
            <div class="action-bar" v-if="activeTab === 'department-management'">
                <div></div>
                <button class="add-button" @click="handleAdd1">
                    <i class="fas fa-plus"></i> <!-- 新增图标 -->
                    <span>新增</span>
                </button>
            </div>

            <!-- 数据表格 -->
            <div class="data-table" v-if="activeTab === 'department-management'">
                <table>
                    <thead>
                        <tr>
                            <th v-for="column in columns1" :key="column">{{ column }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in paginatedData1" :key="item.id">
                            <td>{{ item.name }}</td>
                            <td>{{ item.remark }}</td>
                            <td>
                                <i class="fas fa-edit edit-icon" @click="editItem1(item)"></i> <!-- 修改图标 -->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页组件 -->
            <div class="pagination" v-if="activeTab === 'department-management'">
                <button :disabled="currentPage1 === 1" @click="currentPage1--">
                    上一页
                </button>
                <span>第 {{ currentPage1 }} 页 / 共 {{ totalPages1 }} 页</span>
                <button :disabled="currentPage1 === totalPages1" @click="currentPage1++">
                    下一页
                </button>
            </div>

            <!-- 员工管理的内容 -->
            <!-- 功能栏 -->

            <div class="action-bar" v-if="activeTab === 'employee-management'">
                <div class="search-bar" v-if="activeTab === 'employee-management'">
                    <div class="search-input-container">
                        <i class="fas fa-search search-icon"></i> <!-- 放大镜图标 -->
                        <input v-model="searchQuery" type="text" placeholder="请输入姓名" />
                    </div>
                    <button @click="handleSearch">
                        <span>查询</span>
                    </button>
                </div>
                <button class="add-button" @click="handleAdd">
                    <i class="fas fa-plus"></i> <!-- 新增图标 -->
                    <span>新增</span>
                </button>
            </div>

            <!-- 数据表格 -->
            <div class="data-table" v-if="activeTab === 'employee-management'">
                <table>
                    <thead>
                        <tr>
                            <th v-for="column in columns2" :key="column">{{ column }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in paginatedData" :key="item.id">
                            <td>{{ item.id }}</td>
                            <td>{{ item.name }}</td>
                            <td>{{ item.gender }}</td>
                            <td>{{ item.idCard }}</td>
                            <td>{{ item.phone }}</td>
                            <td>{{ item.department }}</td>
                            <td>{{ item.status }}</td>
                            <td>
                                <i class="fas fa-edit edit-icon" @click="editItem(item)"></i> <!-- 修改图标 -->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页组件 -->
            <div class="pagination" v-if="activeTab === 'employee-management'">
                <button :disabled="currentPage === 1" @click="currentPage--">
                    上一页
                </button>
                <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
                <button :disabled="currentPage === totalPages" @click="currentPage++">
                    下一页
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

// 当前激活的菜单项
const activeTab = ref("department-management");

// 表格列名
const columns1 = ref([
    "部门名称",
    "备注",
    "修改",
]);

// 模拟数据（实际应从数据库获取）
const data1 = ref([
    {
        id: 1,
        name: "技术部",
        remark: "负责技术开发",
    },
    {
        id: 2,
        name: "市场部",
        remark: "负责市场推广",
    },
    // 更多数据...
]);

// 分页功能
const currentPage1 = ref(1);
const pageSize1 = ref(10); // 每页显示的数据条数

// 计算分页后的数据
const paginatedData1 = computed(() => {
    const start1 = (currentPage1.value - 1) * pageSize1.value;
    const end1 = start1 + pageSize1.value;
    return data1.value.slice(start1, end1);
});

// 计算总页数
const totalPages1 = computed(() => {
    return Math.ceil(data1.value.length / pageSize1.value);
});

// 新增部门
const handleAdd1 = () => {
    // 打开新增部门的弹窗或页面
    console.log("新增部门");
};

// 修改部门
const editItem1 = (item) => {
    // 打开修改部门的弹窗或页面
    console.log("修改部门:", item);
};

const switchTab = (tab) => {
    activeTab.value = tab;
};


const columns2 = ref([
    "编号",
    "姓名",
    "性别",
    "身份证",
    "联系电话",
    "部门",
    "状态",
    "修改",
]);

// 模拟数据（实际应从数据库获取）
const data = ref([
    {
        id: 1,
        name: "张三",
        gender: "男",
        idCard: "123456789012345678",
        phone: "13800138000",
        department: "技术部",
        status: "在职",
    },
    {
        id: 2,
        name: "李四",
        gender: "女",
        idCard: "987654321098765432",
        phone: "13900139000",
        department: "市场部",
        status: "离职",
    },
    // 更多数据...
]);

// 查询功能
const searchQuery = ref("");
const filteredData = ref(data.value);

// 分页功能
const currentPage = ref(1);
const pageSize = ref(10); // 每页显示的数据条数

// 计算分页后的数据
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredData.value.slice(start, end);
});

// 计算总页数
const totalPages = computed(() => {
    return Math.ceil(filteredData.value.length / pageSize.value);
});

// 处理搜索
const handleSearch = () => {
    if (searchQuery.value) {
        filteredData.value = data.value.filter((item) =>
            item.name.includes(searchQuery.value)
        );
    } else {
        filteredData.value = data.value;
    }
    currentPage.value = 1; // 搜索后重置到第一页
};

// 新增员工
const handleAdd = () => {
    // 打开新增员工的弹窗或页面
    console.log("新增员工");
};

// 修改员工
const editItem = (item) => {
    // 打开修改员工的弹窗或页面
    console.log("修改员工:", item);
};

// 初始化数据
onMounted(() => {
    // 模拟从数据库获取数据
    // 实际应使用API调用
    console.log("数据加载完成");
});
</script>

<style scoped>
.basic-info-container {
    display: flex;
    height: 100%;
}

/* 左侧菜单 */
.left-menu {
    width: 200px;
    background-color: #f5f5f5;
    /* 淡灰色背景 */
    padding: 20px;
    border-right: 1px solid #ddd;
    /* 右侧分割线 */
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #333;
    padding: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
}

.menu-item:hover {
    background-color: #e0e0e0;
    /* 悬停背景色 */
}

.menu-item.active {
    background-color: #3498db;
    /* 激活背景色 */
    color: white;
}

.menu-item i {
    font-size: 24px;
    /* 图标大小 */
}

.menu-item span {
    font-size: 14px;
    /* 文字大小 */
}

/* 右侧内容 */
.right-content {
    flex-grow: 1;
    padding: 20px;
}

/* 功能栏 */

.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* 查询功能 */
.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-input-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px;
    background-color: #fff;
}

.search-icon {
    font-size: 16px;
    color: #95a5a6;
    margin-right: 8px;
}

.search-input-container input {
    border: none;
    outline: none;
    flex-grow: 1;
    font-size: 14px;
}

.search-bar button {
    padding: 8px 16px;
    background-color: #3498db; /* 蓝色按钮 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.search-bar button:hover {
    background-color: #2980b9; /* 按钮悬停效果 */
}

.add-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #28a745; /* 绿色按钮 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.add-button:hover {
    background-color: #218838; /* 按钮悬停效果 */
}

/* 数据表格 */
.data-table {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px;
    text-align: left;
    border-right: 1px solid #ddd;
    /* 列竖线分割 */
    border-bottom: 1px solid #ddd;
    /* 行横线分割 */
}

th:last-child,
td:last-child {
    border-right: none;
    /* 最后一列不加竖线 */
}

th {
    background-color: #3498db;
    /* 表头背景色 */
    color: white;
}

tr:hover {
    background-color: #f5f5f5;
    /* 行悬停效果 */
}

/* 修改图标 */
.edit-icon {
    font-size: 18px;
    color: #3498db;
    cursor: pointer;
}

.edit-icon:hover {
    color: #2980b9;
    /* 悬停效果 */
}

/* 分页组件 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination button {
    padding: 8px 16px;
    background-color: #3498db;
    /* 蓝色按钮 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.pagination button:disabled {
    background-color: #95a5a6;
    /* 禁用状态 */
    cursor: not-allowed;
}

.pagination button:hover:not(:disabled) {
    background-color: #2980b9;
    /* 按钮悬停效果 */
}

.pagination span {
    font-size: 14px;
    color: #333;
}
</style>